<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>下拉菜单</title>
    <style>
    h4{
        padding: 0;
        margin: 0;
    }

    .menu{
        position: relative; ;
        width: 150px;
        height:30px ;
        background-color: aqua;
        color: brown;
    }
    .menu>h4{
        height: 30px;
        line-height: 30px;
        text-align: center;
    }
    .down{
        position:absolute;
        left: 0;
        top:30px;
        height: 150px;
        padding: 10px;
        width: 150px;
        border: 1px solid blue;
        line-height: 10px;
        box-sizing: border-box;
    }

    </style>

    <!-- //绝对定位和相对定位，事件加到父类上 -->
</head>
<body>
    <div class="menu">
        <h4>标题</h4>
        <div class="down">
           Jquery下拉菜单——我好饿 ，注意事件添加的对象
        </div>

    </div>

    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
    $(function(){
        $(".menu").hover(function(){
        $(this).find(".down").animate({"width":0,"height":0})
        },function(){
            // $(this).find(".down").fadeOut();
        });
    })
    
    </script>

</body>
</html>